<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="sass/css/common.css" />
		<link rel="stylesheet" href="sass/css/shopCart.css" />
		<link rel="shortcut icon" href="favicon.ico" />
		<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="topbar">
			<div class="topbarinner">
				<!--登陆-->
				<div class="userLogin">
					<b style="float: left;">欢迎光临中国图书网</b>
					<div class="unlogin" style="float: left;">
						<a href="login.html">登陆</a>
						<span>|</span>
						<a href="register.html" target="_blank">注册</a>
					</div>
					<div class="logined" style="display: none; float: left;">
						<a href="#javascript:;" id="userLoginedId">xx</a>
						<a href="#javascript:;" id="quitLogin">安全退出</a>
					</div>
				</div>
				<!--用户购物车订单-->
				<div class="userTool">
					<ul class="clear_fix">
						<li>
							<div class="dt">
								<a href="javascript:;">购物车</a>
							</div>
						</li>
						<li>
							<div class="dt">
								<a href="javascript:;">我的订单</a>
							</div>
						</li>
						<li class="drop">
							<div class="dt">
								<a href="javascript:;">我的账户</a><i></i>
							</div>
							<div class="dropLayer">
								<a href="javascript:;">我的收藏夹</a>
								<a href="javascript:;">账户余额</a>
								<a href="javascript:;">我的优惠券</a>
								<a href="javascript:;">我的积分</a>
								<a href="javascript:;">收货地址</a>
								<a href="javascript:;">我的书评</a>
								<a href="javascript:;">我的消息</a>
								<a href="javascript:;">积分换券</a>
							</div>
						</li>
						<li>
							<div class="dt">
								<a href="javascript:;">帮助中心</a>
							</div>
						</li>
						<li class="drop">
							<div class="dt">
								<a href="javascript:;">手机中图</a><i></i>
							</div>
							<div class="dropLayer" style="right: 0;left: initial;width: 164px;padding-bottom: 7px;padding-left: 5px;">
								<div class="erweimaWrap">
									<div class="erweima">
										<img src="images/weiboerweima.jpg" alt="" />
									</div>
									<div class="text">
										<b>扫一扫</b>
										<span>
											关注中图网
											<br />
											官方微博
										</span>
									</div>
								</div>
								<div class="erweimaWrap">
									<div class="erweima">
										<img src="images/weixinerweima.jpg" alt="" />
									</div>
									<div class="text">
										<b>扫一扫</b>
										<span>
											关注中图网
											<br />
											微信公众号
										</span>
									</div>
								</div>
								<div class="erweimaWrap">
									<div class="erweima">
										<img src="images/phoneerweima.jpg" alt="" />
									</div>
									<div class="text">
										<b>扫一扫</b>
										<span>
											手机中图
											<br />
											手机触屏版
										</span>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var unlogin = document.querySelector(".unlogin");
			var logined = document.querySelector(".logined");
			var userLoginedId = document.querySelector("#userLoginedId")
			var quitLogin = document.querySelector("#quitLogin");
			//关于登陆成功显示用户名字的js
			//  	var uid = Cookie.getCookie("token");
			//		var user = Cookie.getCookie("username");
			var uid = jQuery.cookie("token");
			console.log(uid)
			var user = jQuery.cookie("username");
			if(user) {
				unlogin.style.display = "none"
				logined.style.display = "block";
				userLoginedId.innerHTML = user;
				userLoginedId.style.color = "#0365b9";

			}
			quitLogin.onclick = function() {
				console.log(1)
				jQuery.cookie('token', null, {
					expires: -1,
					path: '/'
				});

				//			      	   	   Cookie.setCookie("token",res.data.id,30,"/");
				jQuery.cookie('username', null, {
					expires: -1,
					path: '/'
				});
				location.reload()

			}
		</script>
		<div class="loginHead">
			<div class="loginBar">
				<div class="loginBarInner">
					<div class="logo">
						<h1>
				     		<a href="javascript:;">
				     			<img src="loginRegisterImages/logo5.jpg" alt="" />
				     		</a>
				     	</h1>
					</div>
					<div class="ad">
						<span class="zhengban">正版好图书</span>
						<span class="liujiu">全场满69包邮</span>
						<span class="yizhe">特价书一折起</span>
					</div>

				</div>
			</div>
		</div>
		<div class="content" id="car">
			<div class="contentInner empty_cart ">
				<div class="tabShoppCar clear_fix">
					<div class="carTab">
						<ul>
							<li class="cur">
								<a href="javascript:;">购物车<span>0</span></a>
							</li>
							<li>
								<a href="javascript:;">淘书团购物车<span>0</span></a>
							</li>
						</ul>
					</div>
				</div>
				<div class="cartEmpty clear_fix">
					<div class="emptyIcon">

					</div>
					<div class="emptyText">
						<span>购物车空空的哦~，去看看心仪的商品吧~</span>
						<a href="index.html">去购物</a>
					</div>
				</div>
			</div>
			<div class="contentInner full_car  show">
				<div class="shoppingProcedure">
					<span class="current">我的购物车 </span>
					<span>填写核对订单信息</span>
					<span>成功提交订单</span>
				</div>
				<div class="tabShoppCar clear_fix">
					<div class="carTab">
						<ul>
							<li class="cur">
								<a href="javascript:;">购物车<span class="shopCartNum">(0)</span></a>
							</li>
							<li>
								<a href="javascript:;">淘书团购物车<span>(0)</span></a>
							</li>

						</ul>
					</div>
					<div class="shoppingTip">
						<strong>
		    				重要提示
		    			</strong>
						<strong>
		    				|
		    			</strong>
						<span>购物车中的商品可能因缺货下架、或售价发生变化，建议尽快提交订单</span>
					</div>
				</div>
				<div class="shoppingCar">
					<!--购物车头部-->
					<div class="shoppingTitle">
						<ul>
							<li class="f1">
								<input type="checkbox" name="" id="seleAll" value="" />
							</li>
							<li class="f2">图书名称</li>
							<li class="f3">定价（元)</li>
							<li class="f4">一星会员（元）</li>
							<li class="f5">数量操作</li>
							<li class="f6">小计（元）</li>
							<li class="f7">操作</li>
						</ul>
					</div>
					<!--购物车内容-->
					<div class="shoppingListWrap">
						<div class="shoppingItem">
							<div class="listWrap">
								<!--这可以写select-->
								<!--<div class="shoppingList clear_fix">
									<div class="cartCheckbox fl">
										<input type="checkbox" name="" id="" value="" />
									</div>
									<div class="fl goodImg ">
										<a href="javascript:;">
											<img src="detailImgs/z7747868.jpg" />
										</a>
									</div>
									<div class="goodName fl">
										<a href="javascript:;">人间失格-典藏插图定本</a>
									</div>
									<div class="goodPrice fl">
										<strong>
		    								￥29.8
		    							</strong>
									</div>
									<div class="goodSellPrice fl">
										<strong class="oneStarPrice">
		    								￥14.6
		    							</strong>
									</div>
									<div class="goodQuantity fl">
										<div class="quantityForm">
											<a href="javascript:;" class="minus">-</a>
											<input type="text" autocomplete="off" value="1" class="vau" />
											<a href="javascript:;" class="plus">+</a>
										</div>
									</div>
									<div class="goodSum fl">
										<strong class="subtotal">
		    								￥14.6
		    							</strong>
									</div>
									<div class="goodOperation fl">
										<a href="javascript:;" class="deletBtn">删除</a>
										<a href="javascript:;">移入收藏</a>
									</div>
								</div>-->

								<!--<div class="shoppingList clear_fix">
									<div class="cartCheckbox fl">
										<input type="checkbox" name="" id="" value="" />
									</div>
									<div class="fl goodImg ">
										<a href="javascript:;">
											<img src="detailImgs/z7747868.jpg" />
										</a>
									</div>
									<div class="goodName fl">
										<a href="javascript:;">人间失格-典藏插图定本</a>
									</div>
									<div class="goodPrice fl">
										<strong>
		    								￥29.8
		    							</strong>
									</div>
									<div class="goodSellPrice fl">
										<strong class="oneStarPrice"> 
		    								￥14.6
		    							</strong>
									</div>
									<div class="goodQuantity fl">
										<div class="quantityForm">
											<a href="javascript:;" class="minus">-</a>
											<input type="text" autocomplete="off" value="1" class="vau" />
											<a href="javascript:;" class="plus">+</a>
										</div>
									</div>
									<div class="goodSum fl">
										<strong class="subtotal">
		    								￥14.6
		    							</strong>
									</div>
									<div class="goodOperation fl">
										<a href="javascript:;" class="deletBtn">删除</a>
										<a href="javascript:;">移入收藏</a>
									</div>
								</div>-->

								<!--<div class="shoppingList clear_fix">
									<div class="cartCheckbox fl">
										<input type="checkbox" name="" id="" value="" />
									</div>
									<div class="fl goodImg ">
										<a href="javascript:;">
											<img src="detailImgs/z7747868.jpg" />
										</a>
									</div>
									<div class="goodName fl">
										<a href="javascript:;">人间失格-典藏插图定本</a>
									</div>
									<div class="goodPrice fl">
										<strong>
		    								￥29.8
		    							</strong>
									</div>
									<div class="goodSellPrice fl">
										<strong class="oneStarPrice">
		    								￥14.6
		    							</strong>
									</div>
									<div class="goodQuantity fl">
										<div class="quantityForm">
											<a href="javascript:;" class="minus">-</a>
											<input type="text" autocomplete="off" value="1" class="vau" />
											<a href="javascript:;" class="plus">+</a>
										</div>
									</div>
									<div class="goodSum fl">
										<strong class="subtotal">
		    								￥14.6
		    							</strong>
									</div>
									<div class="goodOperation fl">
										<a href="javascript:;" class="deletBtn">删除</a>
										<a href="javascript:;">移入收藏</a>
									</div>
								</div>-->

							</div>
						</div>
					</div>

				</div>
			</div>
			<!--购物车底部-->
			<div class="shoppingfootWrap full_car show">
				<div class="shoppingfootinner">
					<div class="shoppingFoot clear_fix">
						<div class="shoppingFootLeft">
							<div class="Checkbox">
								<input type="checkbox" name="" id="footSeleAll" value="" />全选
							</div>
							<div class="removeGood">
								<a href="javascript:;">删除选中的商品</a>
							</div>
							<div class="removeGood">
								<a href="javascript:;">清除下架或缺货商品</a>
							</div>
						</div>
						<div class="shoppingFootRight">
							<div class="shoppingResult">
								<div class="result">
									已选择
									<span class="allnum">0</span> 件商品，商品总金额
									<span class="money">￥</span>
									<b class="allprice"></b>
								</div>

							</div>
							<div class="submitBtn">
								<a href="javascript:;">立即结算</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var url = "http://jx.xuzhixiang.top/ap/api/cart-list.php?id=" + uid;
		var listWrap = document.querySelector(".listWrap");
		console.log(listWrap)
		$.ajax({
			type: "get",
			url: url,
			async: true,
			success: function(res) {
				
				var res = JSON.parse(res)
				console.log(res.data.length);
			    if(res.data.length==0){
			    	
			    	var empty_cart = document.querySelector(".empty_cart");
			    	empty_cart.className="contentInner empty_cart show ";
			    	var full_car = document.querySelector(".full_car");
			    	full_car.className="shoppingfootWrap full_car";
			    }

				for(let i = 0; i < res.data.length; i++) {
					var pdesc = JSON.parse(res.data[i].pdesc)
					console.log(pdesc)
					var x = res.data[i].pnum * pdesc.nowprice;
                    var x12=x.toFixed(2)
					var html = "";
					html += `<div class="shoppingList clear_fix">
									<div class="cartCheckbox fl">
										<input type="checkbox" name="" id="" value="" />
									</div>
									<div class="fl goodImg ">
										<a href="javascript:;">
											<img src=${res.data[i].pimg} />
										</a>
									</div>
									<div class="goodName fl">
										<a href="javascript:;">${res.data[i].pname}</a>
									</div>
									<div class="goodPrice fl">
										<strong>
		    								￥${pdesc.oldprice}
		    							</strong>
									</div>
									<div class="goodSellPrice fl">
										<strong class="oneStarPrice">
		    								￥${pdesc.nowprice}
		    							</strong>
									</div>
									<div class="goodQuantity fl">
										<div class="quantityForm">
											<a href="javascript:;" class="minus">-</a>
											<input type="text" autocomplete="off" value=${res.data[i].pnum} class="vau" />
											<a href="javascript:;" class="plus">+</a>
										</div>
									</div>
									<div class="goodSum fl">
										<strong class="subtotal">
		    								￥${x12}
		    							</strong>
									</div>
									<div class="goodOperation fl">
										<a href="javascript:;" class="deletBtn">删除</a>
										<a href="javascript:;">移入收藏</a>
									</div>
								</div>`

					//					console.log(html)
					listWrap.innerHTML += html;
				}
	

				//购物车里的全选和全不选
				var seleAll = document.querySelector("#seleAll");
				console.log(seleAll)
				var selects = document.querySelectorAll(".cartCheckbox input");
				console.log(selects)
				var footSeleAll = document.querySelector("#footSeleAll");
				//选中设置select样式
				var shoppingList = document.querySelectorAll(".shoppingList")
				//获取提交按钮
				var submitBtn = document.querySelector(".submitBtn")

				var shopCartNum = document.querySelector(".shopCartNum");
				shopCartNum.innerHTML = "(" + shoppingList.length + ")"

				//全选按钮的点击事件
				seleAll.onclick = function() {

					//			console.log(this);
					//全选的意思就是如果点击了这个按钮  下面的也都被勾上，所以只要让
					//下面的按钮的状态等于 这个全选按钮的状态就可以了，如果全选是false就是没勾上，下面也没勾上
					//如果全选的checked是勾上的，就是true 下面也都为true
					for(let k = 0; k < selects.length; k++) {
						selects[k].checked = this.checked;
						if(this.checked) {

							shoppingList[k].className = "shoppingList clear_fix select";
							submitBtn.className = "submitBtn cur";
							//总价计算
							var plussum = 0;
							var plusAllNum = 0;
							for(let j = 0; j < minus.length; j++) {
								var p1 = JSON.parse(res.data[j].pdesc)
								if(selects[j].checked) {
									var c = vau[j].value * p1.nowprice;
									plussum += parseFloat(c);

									var d = vau[j].value;
									plusAllNum += parseFloat(d);

								} else {
									flag1 = false

								}
							}
							//				plussum=b.toFixed(2);

							allnum.innerHTML = parseInt(plusAllNum)
							allprice.innerHTML = plussum.toFixed(2)

						} else {
							shoppingList[k].className = "shoppingList clear_fix";
							submitBtn.className = "submitBtn";
							allnum.innerHTML = 0;
							allprice.innerHTML = 0;

						}
					}
					footSeleAll.checked = this.checked;

				}
				footSeleAll.onclick = function() {

					for(let k = 0; k < selects.length; k++) {
						selects[k].checked = this.checked;
						if(this.checked) {
							shoppingList[k].className = "shoppingList clear_fix select";
							submitBtn.className = "submitBtn cur";
							//总价计算
							var plussum = 0;
							var plusAllNum = 0;
							for(let j = 0; j < minus.length; j++) {
								var p1 = JSON.parse(res.data[j].pdesc)
								if(selects[j].checked) {
									var c = vau[j].value * p1.nowprice;
									plussum += parseFloat(c);

									var d = vau[j].value;
									plusAllNum += parseFloat(d);

								} else {
									flag1 = false

								}
							}
							//				plussum=b.toFixed(2);

							allnum.innerHTML = parseInt(plusAllNum)
							allprice.innerHTML = plussum.toFixed(2)
						} else {
							shoppingList[k].className = "shoppingList clear_fix"
							submitBtn.className = "submitBtn";
							allnum.innerHTML = 0;
							allprice.innerHTML = 0;
						}
					}
					seleAll.checked = this.checked;

				}

				for(let i = 0; i < selects.length; i++) {

					selects[i].onclick = function() {

						submitBtn.className = "submitBtn"
						var flag = true; //默认都被选中了
						//判断是否所有的复选框都选中
						for(let j = 0; j < selects.length; j++) {

							if(!selects[j].checked) {

								//没选中就进来了
								flag = false;

								shoppingList[j].className = "shoppingList clear_fix";
								//						
								//						break;
							} else if(selects[j].checked) {

								shoppingList[j].className = "shoppingList clear_fix select"
								submitBtn.className = "submitBtn cur"
							}
						}

						//全选的这个复选框的状态就是flag这个变量的值
						seleAll.checked = flag;
						footSeleAll.checked = flag;

						//选中的同时让总价和数量改变
						//				shoppingList[i].className = "shoppingList clear_fix select"
						//				submitBtn.className = "submitBtn cur"
						//				selects[i].checked = true;
						//				vau[i].value++

						var p2 = JSON.parse(res.data[i].pdesc)
						var b = vau[i].value * p2.nowprice;

						subtotal[i].innerHTML = "￥" + b.toFixed(2)

						//总价计算
						var plussum = 0;
						var plusAllNum = 0;
						for(let j = 0; j < minus.length; j++) {
							var p1 = JSON.parse(res.data[j].pdesc)
							if(selects[j].checked) {
								var c = vau[j].value * p1.nowprice;
								plussum += parseFloat(c);

								var d = vau[j].value;
								plusAllNum += parseFloat(d);

							} else {
								flag1 = false

							}
						}
						//				plussum=b.toFixed(2);

						allnum.innerHTML = parseInt(plusAllNum)
						allprice.innerHTML = plussum.toFixed(2)

					}
				}

				var minus = document.querySelectorAll(".shoppingList .minus");
				var vau = document.querySelectorAll(".shoppingList .vau");
				var plus = document.querySelectorAll(".shoppingList .plus");
				var subtotal = document.querySelectorAll(".goodSum .subtotal");
				//总价按钮
				var allprice = document.querySelector(".shoppingFootRight .allprice");
				var allnum = document.querySelector(".shoppingFootRight .allnum");

				for(let i = 0; i < minus.length; i++) {
					var p10 = JSON.parse(res.data[i].pdesc)
					minus[i].onclick = function() {
						var p1 = JSON.parse(res.data[i].pdesc)
						var flag2 = true;

						shoppingList[i].className = "shoppingList clear_fix select"
						submitBtn.className = "submitBtn cur"
						selects[i].checked = true;

						vau[i].value--
						var url = "http://jx.xuzhixiang.top/ap/api/cart-update-num.php?uid="+uid+"&pid="+res.data[i].pid+"&pnum="+vau[i].value
						
						$.ajax({
							type:"get",
							url:url,
							async:true,
							success:function(res){
								var res = JSON.parse(res);
								
							}
						});
							if(vau[i].value < 1) {
								deletBtn[i].click();
							}
						var a = vau[i].value * p10.nowprice;
						subtotal[i].innerHTML = "￥" + a.toFixed(2);

						//总价计算
						var plussum = 0;
						var plusAllNum = 0;
						for(let j = 0; j < minus.length; j++) {
							var p1 = JSON.parse(res.data[j].pdesc)
							if(selects[j].checked) {
								var c = vau[j].value * p1.nowprice;
								plussum += parseFloat(c);

								var d = vau[j].value;
								plusAllNum += parseFloat(d);

							} else {
								flag2 = false;
							}
						}
						allnum.innerHTML = parseInt(plusAllNum)
						allprice.innerHTML = plussum.toFixed(2)
						seleAll.checked = flag2;
						footSeleAll.checked = flag2;
					}
					plus[i].onclick = function() {

						var p10 = JSON.parse(res.data[i].pdesc)

						//			     console.log(p1.nowprice)
						var flag1 = true;

						shoppingList[i].className = "shoppingList clear_fix select"
						submitBtn.className = "submitBtn cur"
						selects[i].checked = true;
						vau[i].value++
						
						
						var url = "http://jx.xuzhixiang.top/ap/api/cart-update-num.php?uid="+uid+"&pid="+res.data[i].pid+"&pnum="+vau[i].value
						
						$.ajax({
							type:"get",
							url:url,
							async:true,
							success:function(res){
								var res = JSON.parse(res);
								
							}
						});
						
						
						
							var b = vau[i].value * p10.nowprice;
						//				  
						subtotal[i].innerHTML = "￥" + b.toFixed(2)

						//总价计算
						var plussum = 0;
						var plusAllNum = 0;
						for(let j = 0; j < minus.length; j++) {

							if(selects[j].checked) {
								var p1 = JSON.parse(res.data[j].pdesc)
								var c = vau[j].value * p1.nowprice;

							
								plussum += parseFloat(c);
							
								var d = vau[j].value;
								plusAllNum += parseFloat(d);
							} else {
								flag1 = false
							}
						}
						//				plussum=b.toFixed(2);

						allnum.innerHTML = parseInt(plusAllNum)
						allprice.innerHTML = plussum.toFixed(2)
						seleAll.checked = flag1;
						footSeleAll.checked = flag1;
					}
				}
					//删除事件
		            var deletBtn = document.querySelectorAll(".deletBtn");
		            for(let i=0;i<deletBtn.length;i++){
		            	deletBtn[i].onclick = function(){
		            		var url = "http://jx.xuzhixiang.top/ap/api/cart-delete.php?uid="+uid+"&pid="+res.data[i].pid;
		            		console.log(url)
		            		$.ajax({
		            			type:"get",
		            			url:url,
		            			async:true,
		            			success:function(res){
//		            			  location.reload();
		            			  var shoppingList  = document.querySelectorAll(".shoppingList ");
		            			  shoppingList[i].remove();
		            			  var shopCartNum = document.querySelector(".shopCartNum");
		            			
		            			  var le1 =deletBtn.length;
		            			  le1--;
				                  shopCartNum.innerHTML = "(" + le1 + ")"
		            			  
		            			}
		            		});
		            	}
		            }
		
			}

		});
		
		
		
	
	</script>

</html>